<!-- 基础信息展示 -->
<template>
    <div class="app-container">
        <el-descriptions border :title="title">
            <el-descriptions-item label="招标项目编号" :span="2" disabled>{{
                tenderProject.iNumber
            }}</el-descriptions-item>
            <el-descriptions-item label="招标项目名称" :span="2">
                <template>
                    <span v-if="check == 1 || ent == 1"> {{ tenderProject.iName }}</span>
                    <el-input v-model="tenderProject.iName" v-if="edit == 1"></el-input>
                </template>
            </el-descriptions-item>
            <el-descriptions-item label="招标方式" :span="2">
                <template>
                    <el-radio-group v-model="tenderProject.iWay" :disabled="edit != 1">
                        <el-radio :label="1">公开招标</el-radio>
                        <el-radio :label="6">邀请招标</el-radio>
                    </el-radio-group>
                </template>
            </el-descriptions-item>
            <el-descriptions-item label="是否必招" :span="2">
                <template>
                    <el-radio-group v-model="tenderProject.must" :disabled="edit != 1">
                        <el-radio :label="1">依法必招</el-radio>
                        <el-radio :label="2">自主招标</el-radio>
                    </el-radio-group>
                </template>
            </el-descriptions-item>
            <el-descriptions-item label="资格审查方式" :span="2">
                <template>
                    <el-radio-group v-model="tenderProject.sWay" :disabled="edit != 1">
                        <el-radio :label="1">资格预审</el-radio>
                        <el-radio :label="2">资格后审</el-radio>
                    </el-radio-group>
                </template>
            </el-descriptions-item>
            <el-descriptions-item label="业务类型" :span="2">
                <template>
                    <el-select v-model="tenderProject.bType" :disabled="edit != 1">
                        <el-option v-for="dict in dict.type.business_type" :label="dict.label" :value="dict.value">
                        </el-option>
                    </el-select>
                </template>
            </el-descriptions-item>
            <el-descriptions-item label="项目预算" :span="2">
                <template>
                    <span> {{ tenderProject.pBudget }}.00</span>
                </template>
            </el-descriptions-item>
            <el-descriptions-item :span="2"></el-descriptions-item>
        </el-descriptions>

        <div style="margin-top: 15px"></div>

        <el-descriptions border title="招标人信息">
            <el-descriptions-item label="招标单位" disabled :span="2">
                <template>
                    <span v-if="edit != 1"> {{ tenderProject.iUnit }}</span>
                    <el-input autosize v-model="tenderProject.iUnit" v-if="edit == 1"></el-input>
                </template>
            </el-descriptions-item>
            <el-descriptions-item label="联系人" :span="2">
                <template>
                    <span v-if="edit != 1"> {{ tenderProject.person }}</span>
                    <el-input v-model:value="tenderProject.person" v-if="edit == 1" />
                </template>
            </el-descriptions-item>
            <el-descriptions-item label="电话" :span="2">
                <template>
                    <span v-if="edit != 1"> {{ tenderProject.phone }}</span>
                    <el-input v-model="tenderProject.phone" v-if="edit == 1"></el-input>
                </template>
            </el-descriptions-item>
            <el-descriptions-item label="邮箱" :span="2">
                <span v-if="edit != 1"> {{ tenderProject.email }}</span>
                <el-input v-model="tenderProject.email" v-if="edit == 1"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="地址" :span="2">
                <span v-if="edit != 1"> {{ tenderProject.address }}</span>
                <el-input autosize v-model="tenderProject.address" v-if="edit == 1"></el-input>
            </el-descriptions-item>
            <el-descriptions-item :span="2"></el-descriptions-item>
            <el-descriptions-item label="相关附件" :span="1">
                <template v-if="edit == 1">
                    <el-upload class="upload-demo" action="#" :http-request="uploadDeviceFile" :drag="true"
                        :before-upload="uploadFileFun" :file-list="fileList" :on-remove="handleRemoveFile">
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">
                            将文件拖到此处，或<em>点击上传</em>
                        </div>
                        <div class="el-upload__tip fontSize12 colorRed" slot="tip">
                            上传文件格式为word或pdf或png或者txt，文件大小在10M以内
                        </div>
                    </el-upload>
                </template>
                <template v-if="edit != 1">
                    <el-dropdown v-if="edit != 1">
                        <el-button type="primary">
                            下载文件 <i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item v-for="(item, index) in fileList" :key="index">
                                <el-button type="text" @click="downloadMethod(item)" icon="el-icon-download">
                                    下载 {{ item.name }}
                                </el-button>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-descriptions-item>
        </el-descriptions>
        <div style="margin-top: 45px"></div>

        <!-- 行项目 -->
        <el-link type="primary" style="margin-bottom: 10px">行项目信息</el-link>
        <el-table :data="linItemList" stripe style="width: 100%">
            <el-table-column prop="date" type="index" label="序号" width="50" align="center">
            </el-table-column>
            <el-table-column prop="deptId" label="部门名称" align="center" width="120" :formatter="deptFormaterH">
            </el-table-column>
            <el-table-column prop="duId" label="预算科目编号" align="center" width="135">
            </el-table-column>
            <el-table-column prop="duName" label="预算科目名称" align="center" width="120">
            </el-table-column>
            <el-table-column prop="tName" label="产品名称" align="center">
            </el-table-column>
            <el-table-column prop="tId" label="产品编码" align="center">
            </el-table-column>
            <el-table-column prop="totalMoney" label="总金额" align="center">
            </el-table-column>
            <el-table-column prop="vCode" label="行项目编号" align="center" width="180">
            </el-table-column>
            <el-table-column prop="vCount" label="数量" align="center">
            </el-table-column>
            <el-table-column prop="vPerson" label="采购人" align="center">
            </el-table-column>
            <el-table-column prop="vDeliveryTime" label="交付时间" align="center" width="160">
            </el-table-column>
            <el-table-column prop="vDeliveryArea" label="交付地点" align="center">
            </el-table-column>
            <el-table-column prop="vIllustrate" label="需求说明" align="center">
            </el-table-column>
        </el-table>

        <!-- 邀请投标商 -->
        <div style="margin-top:20px;" v-if="tenderProject.iWay == 6">
            <el-link type="primary" style="margin-bottom: 10px;">邀请投标商</el-link>
            <el-button v-if="tenderProject.projectState == 1" style="margin-left: 15px;margin-bottom: 10px;"
                type="primary" @click="showDialog" size="mini">选择投标商</el-button>
            <el-table :data="InviteTable" strip style="width: 100%" ref="table">
                <el-table-column type="index" label="序号" width="50" align="center">
                </el-table-column>
                <el-table-column prop="hName" label="供应商名称" align="center">
                </el-table-column>
                <el-table-column prop="hInstitution" label="机构类型" align="center">
                </el-table-column>
                <el-table-column prop="hSignPhone" label="注册电话" align="center">
                </el-table-column>
                <el-table-column prop="hJuridical" label="法人" align="center">
                </el-table-column>
                <el-table-column prop="hCreditCode" label="统一社会信用代码" align="center">
                </el-table-column>
            </el-table>
        </div>


        <el-dialog title="供应商" v-loading="lodingIs" :visible.sync="dialogSupplier" width="70%">
            <el-table :data="dialogInviteTable" @selection-change="handleSelectionChange" stripe style="width: 100%"
                ref="inviteTable">
                <el-table-column type="selection" width="50" align="center">
                </el-table-column>
                <el-table-column prop="hName" label="供应商名称" align="center">
                </el-table-column>
                <el-table-column prop="hInstitution" label="机构类型" align="center">
                </el-table-column>
                <el-table-column prop="hSignPhone" label="注册电话" align="center">
                </el-table-column>
                <el-table-column prop="hJuridical" label="法人" align="center">
                </el-table-column>
                <el-table-column prop="hCreditCode" label="统一社会信用代码" align="center">
                </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :auto-scroll="false" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getSupplierList" />

            <el-button type="primary" style="margin-top: 20px;margin-left: 93%;"
                @click="confirmSelection">确定</el-button>
        </el-dialog>
    </div>
</template>

<script>
import {
    getTenderProjectInfo,
    uplodaBudgetFile,
    removeFile,
    getSupplierList,
    getSupplierListPage,
} from "@/api/system/purchase";
import { listDept } from "@/api/system/dept";

export default {
    dicts: ["business_type"],
    data() {
        return {
            lodingIs:true,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                hid: 0,
            },
            total: 0,
            title: "",
            InviteTable: [],
            linItemList: [], //(包含行项目,预算信息,物品信息)
            edit: 0,
            ent: 0,
            check: 0,
            tenderProject: {
                iNumber: "",
                iName: "",
                iWay: "0",
                must: "0",
                sWay: "0",
                bType: "0",
                pBudget: "",
                iUnit: "",
                person: "",
                phone: "",
                email: "",
                address: "",
                projectState: null,
                pLeader: null,
            },
            dialogSupplier: false,
            fileList: [],
            deptList: [],
            dialogInviteTable: [],
            selectedRows: [], // 用于存储选中的行
            selectedIds: [], // 用于存储选中的行的ID，防止重复选择
        };
    },
    methods: {
        showDialog() {
            this.dialogSupplier = true;
            this.getSupplierList();
        },
        handleSelectionChange(selection) {
            this.selectedRows = selection;
        },
        confirmSelection() {
            this.InviteTable.push(...this.selectedRows);
            // 过滤掉已邀请的供应商
            this.dialogInviteTable = this.dialogInviteTable.filter(item =>
                !this.InviteTable.includes(item)
            );
            this.selectedRows = [];
        },
        selectable(row) {
            return !this.InviteTable.includes(row);
        },
        tableRowClassName({ row }) {
            if (this.InviteTable.includes(row)) {
                return 'already-selected';
            }
            return '';
        },
        getDeptList() {
            listDept().then((response) => {
                this.deptList = response.data; // 将获取的数据赋值给 deptList
            });
        },
        //删除文件
        handleRemoveFile(file) {
            removeFile(file.name).then((res) => {
                if (res.data == 1) {
                    this.$message({
                        message: "删除成功",
                        type: "success",
                    });
                }
                const index = this.fileList.findIndex((f) => f.name === file.name);
                this.fileList.splice(index, 1); // 从 fileList 中移除一个元素，从 index 位置开始
            });
        },
        tenderProjectInfo(iNumber) {
            getTenderProjectInfo(iNumber).then((res) => {                                
                res.tenderProjectInfo.bType = res.tenderProjectInfo.bType + "";
                this.$route.query.status=res.tenderProjectInfo.projectState
                res.tenderProjectInfo.projectState = res.tenderProjectInfo.projectState + "";
                this.tenderProject = res.tenderProjectInfo;
                res.purchasePlan.forEach((ele) => {
                    ele.totalMoney =
                        ele.vCount * ele.tPrice + ele.vCount * ele.tPrice * ele.taxRate;
                });
                this.InviteTable = res.suppliers;
                this.linItemList = res.purchasePlan;
                this.fileList = res.file;
                if(res.data!=null&&res.data.notice!=null){
                    this.$route.query.kaiStartTime=res.notice.kaiStartTime;
                    this.$route.query.kaiEndTime=res.notice.kaiEndTime;
                }
               
            });
        },
        async downloadMethod(fileInfoL) {
            try {
                // 获取响应
                let response = await fetch(fileInfoL.url);
                // 检查响应是否成功
                if (!response.ok) {
                    throw new Error("网络响应失败");
                }
                // 内容转变成blob地址
                let blob = await response.blob();
                // 创建隐藏的可下载链接
                let objectUrl = window.URL.createObjectURL(blob);
                let a = document.createElement("a");
                a.style.display = "none";
                a.href = objectUrl;
                a.download = fileInfoL.name;

                // 触发点击
                document.body.appendChild(a);
                a.click();

                // 移除
                URL.revokeObjectURL(a.href);
                document.body.removeChild(a);
            } catch (error) {
                console.error("下载文件时出错:", error);
            }
        },
        //部门转化(有惨)
        deptFormaterH(row, column, cellValue, index) {
            for (let i = 0; i < this.deptList.length; i++) {
                if (cellValue == this.deptList[i].deptId) {
                    return this.deptList[i].deptName;
                }
            }
        },
        //给父组件获得数据的方法
        getData() {
            const csTender = {
                csTender: this.tenderProject,


                file: this.fileList,
                inviteTenders: this.InviteTable
            };
            return csTender;
        },
        //文件上传前的校验
        uploadFileFun(file) {
            var test = /(doc|docx|pdf|txt|png)$/.test(
                file.name.split(".").pop().toLowerCase()
            );
            if (!test) {
                this.$message.error("请上传正确的文档格式!");
                return false;
            }
            const isLt2M = file.size / 1024 / 1024 < 10;
            if (!isLt2M) {
                this.$message.error("上传文件大小不能超过 10MB!");
                return false;
            }
        },
        uploadDeviceFile(file) {
            // 创建formdata实例
            let formData = new window.FormData();
            // 将获取的文件通过append方法加入实例中
            formData.append("file", file.file);
            //发送axios请求
            uplodaBudgetFile(formData)
                .then((res) => {
                    // 拿到后端响应的文件名称反显到列表的form
                    const fileInfo = {
                        name: res.data.name,
                        url: res.data.url,
                        size: res.data.size,
                        uid: file.file.uid,
                    };
                    this.fileList.push(fileInfo); // 直接添加文件名字符串
                })
                .catch((err) => {
                    console.error("上传文件失败:", err);
                });
        },
        getSupplierList() {
            getSupplierListPage(this.queryParams).then((res) => {
                this.lodingIs=false;                
                this.dialogInviteTable = res.rows;
                this.total = res.total;
            });
        },
    },
    mounted() {
        this.getDeptList();
        const query = this.$route.query;
        // 设置 check 和 edit 的默认值
        this.edit = query.edit !== null ? parseInt(query.edit) : 0;
        this.check = query.edit !== null ? parseInt(query.check) : 0;
        this.ent = query.ent !== null ? parseInt(query.ent) : 0;
        if (this.check == 1) {
            this.title = "招标项目/查看";
        } else if (this.ent == 1) {
            this.title = "招标项目/进入项目";
        } else {
            this.title = "招标项目/编辑项目";
        }
        this.tenderProjectInfo(query.iNumber);
    },
};
</script>
<style scoped>
.app-container>>>.el-input__inner {
    border: none;
    box-shadow: 0 0 0 0px;
}

span {
    background-color: white;
}
</style>
